<template>
	<view>
		<!-- 顶部导航 -->
		<u-navbar :background="background">
			<view class="ft_16 fw-b">{{title}}</view>
		</u-navbar>
		<view class="content p_top_10">
			<view class="con_1">
				<view class="display just_space bor_bottom" style="height: 60px;">
					<view class="">联系人</view>
					<u-input type="text" v-model="addressInfo.name" placeholder="请输入联系人姓名" input-align="right"/>
				</view>
				<view class="display just_space bor_bottom" style="height: 60px;">
					<view class="">性别</view>
					<u-radio-group v-model="addressInfo.gender">
						<u-radio @change="radioChange" name="2" active-color="#e67e1f">
							女
						</u-radio>
						<u-radio @change="radioChange" name="1" active-color="#e67e1f">
							男
						</u-radio>
					</u-radio-group>
				</view>
				<view class="display just_space" style="height: 60px;">
					<view class="">手机号</view>
					<u-input type="number" v-model="addressInfo.mobile" placeholder="请输入手机号码" input-align="right" maxlength="11"/>
				</view>
				
			</view>
			<view class="con_1">
				<view class="display bor_bottom just_space" style="height: 60px;">
					<view class="">收货地址</view>
					<view class="display " @tap="show=true">
						<view class="p_right_10 c-999">{{address}}</view>
						<u-icon name="arrow-right" color="#dddddd" size="26" style="padding-top: 5rpx;"></u-icon>
					</view>
				</view>
				<view class="" style="padding: 20px 0;">
					<view class="">
						详细地址
					</view>
					<u-input v-model="addressInfo.address" type="textarea" height="150" :auto-height="true" />
				</view>
			</view>
			<view class="display just_space set_moren">
				<view class="">
					是否设为默认地址
				</view>
				<u-switch v-model="checked" size='30' @change="moren" active-color="#ea8a20"></u-switch>
			</view>
			
			<view class="addBtn" @tap="baocun">
				保存
			</view>
		</view>
		
		<!-- 选择地区 -->
		<u-picker mode="region" v-model="show" :area-code='["13", "1303", "130304"]' @confirm="select_address"></u-picker>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title:"添加地址", //导航栏标题
				background:{backgroundColor: '#ffffff',}, //导航栏背景
				addressInfo:{
					mobile:"",
					name:"",
					province_name	:"",
					city_name:"",
					area_name:"",
					address:"",
					is_default:'0',
					gender:'2',
				}, //收货地址信息
				address:"选择/定位", //地区
				
				show:false, //选择地址
				checked:false, //是否默认
				
				type:1, //编辑地址
				//验证规则
				rules:{
					mobile:{
						rule:/^1[3456789]\d{9}$/,  //十一位手机号验证
						msg:"手机号格式错误"
					},
					code:{
						rule:/^[0-9]{6}$/,   //0-9数字验证
						msg:"请输入6位数字验证码"
					},
				},
				
			}
		},
		onLoad(e) {
			console.log(e);
			if(e.address){
				this.addressInfo=JSON.parse(decodeURIComponent(e.address) ) 
				this.title="编辑地址"
				let info=this.addressInfo
				this.address=info.province_name+info.city_name+info.area_name
				console.log(this.addressInfo);
			}
			if(e.type){
				this.type=e.type // 0 添加地址
			}
		},
		methods: {
			validate(key){//判断验证是否符合要求
				let bool=true;
				if(!this.rules[key].rule.test(this.addressInfo[key])){
					//提示信息
					uni.showToast({
						title:this.rules[key].msg,
						icon:"none"
					})
					//取反
					bool=false;
					return false;
				}
				return bool;
			},
			radioChange(e){ //选择性别
				console.log(e);
				this.addressInfo.gender=e
			},
			baocun(){ //保存编辑信息
				console.log(this.addressInfo);
				for(let key in this.addressInfo){ //验证
					if(this.addressInfo[key]==' '||this.addressInfo[key]==null){
						this.$all.toast("请检查地址信息是否完整")
						console.log(key,this.addressInfo[key]);
						return
					}
				}
				if(!this.validate('mobile')) return;  //手机号
				if(this.type==0){ //添加地址
					this.$myRequest('address/addAddress',this.addressInfo)
					.then(res=>{
						console.log(res.data);
						this.$all.toast(res.data.msg)
						if(res.data.code==1){
							setTimeout(()=>{
								uni.$emit('editAddress')
								uni.navigateBack()
							},800)
						}
					})
				}else{
					this.addressInfo["address_id"] = this.addressInfo.id
					delete this.addressInfo.id
					delete this.addressInfo.addresss //删除对象某个元素
					console.log(this.addressInfo);
					// return
					this.$myRequest('address/editAddress',this.addressInfo)
					.then(res=>{
						console.log(res);
						this.$all.toast(res.data.msg)
						if(res.data.code==1){
							setTimeout(()=>{
								uni.$emit('editAddress')
								uni.navigateBack()
							},800)
						}
					})
				}
				
			},
			select_address(e){ //选择省市区
				this.addressInfo.province_name=e.province.label
				this.addressInfo.city_name=e.city.label
				this.addressInfo.area_name=e.area.label
				this.address=e.province.label+e.city.label+e.area.label
			},
			moren(e){ //默认值
				console.log(e);
				if(e){
					this.addressInfo.is_default='1'
				}else{
					this.addressInfo.is_default='0'
				}
			},
			
		}
	}
</script>

<style lang="scss">
page{
	background-color: #f7f7f7;
}
.bor_bottom{
	border-bottom: 1px solid #eeeeee;
}
.content{
	.con_1{
		background-color: #FFFFFF;padding: 0 20px;
		margin-bottom: 10px;
	}
	.set_moren{
		padding: 15px;background-color: #ffffff;
	}
	.addBtn{
		color: #FFFFFF;background: linear-gradient(90deg, #F1A421 0%, #E4741F 100%);border-radius:30px;margin:40px 20px;padding: 15px 0;text-align: center;
	}
}

</style>
